<template>
    <div>
        <h2>用户登录组件</h2>
        <input type="text" v-model="firstName"/>
        <br>
        <input type="text" v-model="lastName"/>
        <br>
        {{firstName}}---{{lastName}}
        <br>
        {{fullName}}
        <br>
        <input type="text" v-model="score" placeholder="判断是否及格">
        <br>
        {{pass}}
        <br>
        <br>
        <h3>原始对象</h3>
        <br>
        <input type="text" v-model="obj.username" placeholder="username">
        {{obj.username}}
    </div>
</template>
<script>
import { computed, reactive, toRefs } from 'vue'

export default{
    setup(){
        // 非响应式数据
        let obj = {
            username:'zhangsan',
            age:''
        }
        // 响应式数据
        let userinfo = reactive({
            firstName:'',
            lastName:'',
            score:78
        })
        // readonly传入一个对象（响应式或普通）或ref,返回一个原始对象的只读
        // userinfo = readonly(userinfo)
        let fullName = computed(()=>{
            return userinfo.firstName+" "+userinfo.lastName
        })
        let pass = computed(()=>{
            return userinfo.score>=60?'及格':'不及格'
        })
        return {
            ...toRefs(userinfo),
            fullName,
            pass,
            obj
        }
    }
}
</script>
